<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>新增机器人</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <style>
      .layui-icon-reduce-circle:before{
        color: #e13535;
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <form class="layui-form" action="" onsubmit="return false">
      <div class="mainBox">
        <div class="main-container mr-5">
          <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="name"
                required
                lay-verify="required"
                placeholder="请输入名称"
                autocomplete="off"
                class="layui-input"
                lay-reqtext="请输入名称"
              />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">token</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="token"
                required
                lay-verify="required"
                placeholder="请输入token"
                autocomplete="off"
                class="layui-input"
                lay-reqtext="请输入token"
              />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">启用</label>
            <div class="layui-input-block">
              <input type="checkbox" name="enable" lay-skin="switch" lay-text="开启|禁用" checked/>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">备份机器人</label>
            
            <div class="layui-input-block">
              <table class="layui-table">
                <colgroup>
                  <col width="45%">
                  <col width="45%">
                  <col>
                </colgroup>
                <thead>
                  <tr>
                    <th colspan="3">
                      <button class="pear-btn pear-btn-primary pear-btn-md" id="add_backup_bot_row" type="button">
                        <i class="layui-icon layui-icon-add-1"></i>新增一条
                      </button>
                    </th>
                  </tr>
                  <tr>
                    <th>token</th>
                    <th>备份目标chat_id/username</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>  
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom" style="bottom:0;">
        <div class="button-container">
          <button
            type="submit"
            class="pear-btn pear-btn-primary pear-btn-md"
            lay-submit=""
            lay-filter="save"
          >
            提交
          </button>
          <button type="reset" class="pear-btn pear-btn-md">重置</button>
        </div>
      </div>
    </form>
  </body>
  <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
  <script src="/app/admin/component/pear/pear.js"></script>
  <script src="/app/admin/admin/js/permission.js"></script>
  <script type="text/html" id="backup_bot_tpl">
    <tr>
      <td>
        <div class="layui-row">
          <input type="text" name="backup_token[]" class="layui-input" lay-verify="required" lay-reqtext="请输入备份机器人token" placeholder="请输入备份机器人token" />
        </div>
      </td>
      <td>
        <div class="layui-row">
          <input type="text" name="backup_user_id[]" class="layui-input" lay-verify="required" lay-reqtext="备份目标chat_id或username" placeholder="备份目标chat_id或username" />
        </div>
      </td>
      <td>
        <button class="layui-btn layui-btn-primary layui-btn-sm del-backup-row" type="button" style="border: 0;" title="删除"><i class="layui-icon layui-icon-reduce-circle" style="color: #999;"></i></button>
      </td>
    </tr>
  </script>
  <script>
    layui.use(["form",'jquery',"popup"], function () {
      var form = layui.form, $ = layui.$, layer = layui.layer;
      // 提交表单
      form.on("submit(save)", function (data) {
        var loading = layer.msg('提交中,请勿刷新页面', {
          icon: 16,
          shade: 0.3,
          time: 0,
        });
        $.ajax({
          method:'POST',
          data: data.field,
          success: function(data){
            if(data.code == 0){
              return layui.popup.success("新增成功", function () {
                parent.refreshTable();
                parent.layer.close(parent.layer.getFrameIndex(window.name));
              });
            }else{
              return layui.popup.failure(data.msg || '新增失败');
            }
          },
          complete: function(){
            layer.close(loading);
          },
          error:function(){
            return layui.popup.failure('操作失败,请重试');
          }
        })
        return false;
      });
      //
      $("#add_backup_bot_row").on('click', function(){
        var backup_table = $(this).parents('table:eq(0)');
        backup_table.find('tbody').append($("#backup_bot_tpl").html());
        form.render();
      });
      //
      $(document).on('click', '.del-backup-row', function(){
        $(this).parents('tr:eq(0)').remove();
        form.render();
      });

    });
  </script>
</html>
